<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>外边距</title>
		<!-- 内部样式 -->
		<style>
			*{    /* 通配符:初始化所有标签的内边距和外边距 */
				margin: 0;
				padding: 0;
			}
			.box{
				width: 300px;
				height: 300px;
				background-color: green;
				/* margin: 50px auto; */
				margin-bottom: 120px;
			}
			.box2{
				width: 300px;
				height: 300px;
				background-color: pink;
				/* margin-top: 80px; */
			}
			.bigbox{
				width: 600px;
				height: 600px;
				background-color: deepskyblue;
				margin-top: 100px;
				/* border: 1px solid black; */
				/* padding-top: 100px; */
				overflow: hidden;     /* hidden隐藏 */
			}
			.sbox{
				width: 300px;
				height: 300px;
				background-color: plum;
				margin-top: 100px;
			}
		</style>
		<!-- 外边距：margin 
		1.概念：盒子与盒子之间的距离
		2.应用：
		   2.1可以让块级盒子水平居中，前提条件是盒子有宽度，再给左右外边距设置auto(自动的)
		   2.1初始化所有标签的内外边距
	    3.相邻块级盒子垂直外边距合并，一般在开发中只给其中一个盒子写外边距
		4嵌套块级盒子外边距塌陷问题  解决方式：
		     1.给父盒子添加边框
			 2.给父盒子添加外边框
			 3.给父盒子添加overflow:hidden;
		-->
	</head>
	<body>
		<div class="box"></div>
		<div class="box2"></div>
		<div class="bigbox">
			<div class="sbox"></div>
		</div>
	</body>
</html>
